const {
  override,
  fixBabelImports,
  addLessLoader,
  addWebpackPlugin,
  addWebpackAlias,
  addPostcssPlugins,
  setWebpackOptimizationSplitChunks,
} = require("customize-cra");

const AntdDayjsWebpackPlugin = require("antd-dayjs-webpack-plugin");
const path = require("path");

//关闭sourcemap
process.env.GENERATE_SOURCEMAP = "false";
const resolve = (dir) => path.join(__dirname, dir);

// 打包配置
let reactConfig = require(resolve(`./reactConfig.js`)) || {};

module.exports = override(
  (config) => {
    return config;
  },
  // // 按需加载
  // fixBabelImports('import', {
  //   libraryName: 'antd',
  //   libraryDirectory: 'es',
  //   style: true,
  // }),
  fixBabelImports("import", {
    libraryName: "antd-mobile",
    libraryDirectory: "es",
    style: true,
  }),
  addWebpackPlugin(
    // 用dayjs 替换 moment.js
    new AntdDayjsWebpackPlugin()
  ),
  // 自定义主题
  addLessLoader({
    javascriptEnabled: true,
    // modifyVars: { '@primary-color': '#1DA57A' }, //主题色
  }),
  addWebpackAlias({
    "@": path.resolve(__dirname, "src"),
    "@images": path.resolve(`src/assets/imgs`),
    "@css": path.resolve(__dirname, `src/assets/css`),
  }),

  // 高清适配
  addPostcssPlugins([
    require("postcss-flexbugs-fixes"),
    require("postcss-preset-env")({
      autoprefixer: {
        flexbox: "no-2009",
      },
      stage: 3,
    }),
    require("postcss-aspect-ratio-mini")({}),
    require("postcss-px-to-viewport")({
      viewportWidth: reactConfig.viewportWidth || 750, // (Number) The width of the viewport.
      viewportHeight: reactConfig.viewportHeight || 1334, // (Number) The height of the viewport.
      unitPrecision: 3, // (Number) The decimal numbers to allow the REM units to grow to.
      viewportUnit: "vw", // (String) Expected units.
      selectorBlackList: [".ignore", ".hairlines"], // (Array) The selectors to ignore and leave as px.
      minPixelValue: 1, // (Number) Set the minimum pixel value to replace.
      mediaQuery: false, // (Boolean) Allow px to be converted in media queries.
    }),
    require("postcss-write-svg")({
      utf8: false,
    }),
    require("postcss-viewport-units")({
      // 忽略对伪类的content操作
      // filterRule: rule => !(rule.selector.endsWith('::after') || rule.selector.endsWith('::before') || rule.selector.endsWith(':after') || rule.selector.endsWith(':before'))
      filterRule: (rule) =>
        rule.selector.includes("::after") && rule.selector.includes("::before") && rule.selector.includes(":after") && rule.selector.includes(":before"),
    }),
    require("cssnano")({
      // preset: "advanced",
      autoprefixer: false,
      "postcss-zindex": false,
    }),
  ]),

  // 分块打包
  setWebpackOptimizationSplitChunks({
    cacheGroups: {
      reactDom: {
        name: "react-dom",
        minChunks: 1,
        test: /[\\/]node_modules[\\/](react-dom)[\\/]/,
        chunks: "all",
        reuseExistingChunk: false,
        enforce: true,
      },
      mobx: {
        name: "mobx",
        minChunks: 1,
        test: /[\\/]node_modules[\\/](mobx)[\\/]/,
        chunks: "all",
        reuseExistingChunk: false,
        enforce: true,
      },
      mobxReact: {
        name: "mobxReact",
        minChunks: 1,
        test: /[\\/]node_modules[\\/](mobx-react)[\\/]/,
        chunks: "all",
        reuseExistingChunk: false,
        enforce: true,
      },
      antd: {
        name: "antd-mobile",
        minChunks: 1,
        test: /[\\/]node_modules[\\/](antd-mobile)[\\/]/,
        chunks: "all",
        reuseExistingChunk: false,
        enforce: true,
      },
      copyToClipboard: {
        name: "copy-to-clipboard",
        minChunks: 1,
        test: /[\\/]node_modules[\\/](copy-to-clipboard)[\\/]/,
        chunks: "all",
        reuseExistingChunk: false,
        enforce: true,
      },
      dayjs: {
        name: "dayjs",
        minChunks: 1,
        test: /[\\/]node_modules[\\/](dayjs)[\\/]/,
        chunks: "all",
        reuseExistingChunk: false,
        enforce: true,
      },
      wxJsSdk: {
        name: "wxJsSdk",
        minChunks: 1,
        test: /[\\/]node_modules[\\/](weixin-js-sdk)[\\/]/,
        chunks: "all",
        reuseExistingChunk: false,
        enforce: true,
      },
      utilscore: {
        name: "utilscore",
        minChunks: 1,
        test: /[\\/]node_modules[\\/](utilscore)[\\/]/,
        chunks: "all",
        reuseExistingChunk: false,
        enforce: true,
      },
      bodyLock: {
        name: "bodyLock",
        minChunks: 1,
        test: /[\\/]node_modules[\\/](tua-body-scroll-lock)[\\/]/,
        chunks: "all",
        reuseExistingChunk: false,
        enforce: true,
      },
      html2canvas: {
        name: "html2canvas",
        minChunks: 1,
        test: /[\\/]node_modules[\\/](html2canvas)[\\/]/,
        chunks: "all",
        reuseExistingChunk: false,
        enforce: true,
      },
      cryptoJs: {
        name: "cryptoJs",
        minChunks: 1,
        test: /[\\/]node_modules[\\/](crypto-js)[\\/]/,
        chunks: "all",
        reuseExistingChunk: false,
        enforce: true,
      },
      jsEncrypt: {
        name: "jsEncrypt",
        minChunks: 1,
        test: /[\\/]node_modules[\\/](jsencrypt)[\\/]/,
        chunks: "all",
        reuseExistingChunk: false,
        enforce: true,
      },
      jsRsasign: {
        name: "jsRsasign",
        minChunks: 1,
        test: /[\\/]node_modules[\\/](jsrsasign)[\\/]/,
        chunks: "all",
        reuseExistingChunk: false,
        enforce: true,
      },
      qrcodeReact: {
        name: "qrcodeReact",
        minChunks: 1,
        test: /[\\/]node_modules[\\/](qrcode.react)[\\/]/,
        chunks: "all",
        reuseExistingChunk: false,
        enforce: true,
      },
      rcForm: {
        name: "rcForm",
        minChunks: 1,
        test: /[\\/]node_modules[\\/](rc-form)[\\/]/,
        chunks: "all",
        reuseExistingChunk: false,
        enforce: true,
      },
      sensors: {
        name: "sensors",
        minChunks: 1,
        test: /[\\/]node_modules[\\/](sa-sdk-javascript)[\\/]/,
        chunks: "all",
        reuseExistingChunk: false,
        enforce: true,
      },
      echarts: {
        name: "echarts",
        minChunks: 1,
        test: /[\\/]node_modules[\\/](echarts)[\\/]/,
        chunks: "all",
        reuseExistingChunk: false,
        enforce: true,
      },
    },
  })
);
